<template>
  <div class="tableheader">
    <el-table
      ref="tableRef"
      :data="tabulatedData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
      @sort-change="changeSort"
      :max-height="HeightList"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="selection"
        width="65"
        :selectable="selectable"
        fixed
      >
      </el-table-column>
      <el-table-column
        class="talbe_column"
        v-for="(column, index) in HeaderData"
        :key="index"
        :prop="column.show_name"
        :label="column.title"
        :width="widthObj(column.title, tabulatedData)"
        :show-overflow-tooltip="true"
        sortable="custom"
      >
        <!-- 0是禁用 1 是输入 2 是下拉 3 是多级下拉 4 是时间 5远程搜索 -->
        <template slot-scope="scope">
          <div v-if="scope.$index == 0">
            <div v-if="column.item_type == '0'">
              <el-input :disabled="disabled"></el-input>
            </div>
            <div v-if="column.item_type == '1'">
              <el-input
                v-model.trim="obj[column.name]"
                @input="handleChange()"
                :placeholder="`请输入`"
                clearable
                :id="[column.name, zhangshan]"
              ></el-input>
            </div>
            <div v-if="column.item_type == '2'">
              <el-select
                v-model="obj[column.name]"
                placeholder="请选择"
                @change="handleChange"
                clearable
                :id="column.name"
                v-if="column.param_type == '0' && column.url == ''"
              >
                <el-option
                  v-for="item in JSON.parse(column.options)"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="obj[column.name]"
                placeholder="请选择"
                @change="handleChange"
                clearable
                :id="column.name"
                @focus="cacaderobj(column.url, column.url_param, column.name)"
                v-if="column.param_type == '0' && column.url != ''"
              >
                <el-option
                  v-for="item in column.options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id * 1"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="obj[column.name]"
                placeholder="请选择"
                @change="handleChange"
                clearable
                multiple
                :id="column.name"
                v-if="column.param_type == '2' && column.url == ''"
              >
                <el-option
                  v-for="item in JSON.parse(column.options)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value * 1"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="obj[column.name]"
                placeholder="请选择"
                @change="handleChange"
                clearable
                multiple
                :id="column.name"
                @focus="cacaderobj(column.url, column.url_param, column.name)"
                v-if="column.param_type == '2' && column.url != ''"
              >
                <el-option
                  v-for="item in column.options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id * 1"
                >
                </el-option>
              </el-select>
              <span v-if="column.options == [] && column.url == ''"></span>
            </div>
            <div v-if="column.item_type == '3'">
              <el-cascader
                v-model="obj[column.name]"
                :options="column.options === '' ? [] : column.options"
                :props="propsBranchType"
                clearable
                :id="column.name"
                v-if="column.param_type == '2'"
                @change="handleChange"
                :show-all-levels="false"
                @focus="cacaderobj(column.url, column.url_param, column.name)"
              ></el-cascader>
              <el-cascader
                v-model="obj[column.name]"
                :options="column.options === '' ? [] : column.options"
                :props="propsBranchType"
                clearable
                :id="column.name"
                v-if="column.param_type == '0'"
                @change="handleChange"
                :show-all-levels="false"
                @focus="cacaderobj(column.url, column.url_param, column.name)"
              ></el-cascader>
            </div>
            <div v-if="column.item_type == '4'">
              <el-date-picker
                @click.stop.native
                v-model="obj[column.name]"
                align="right"
                unlink-panels
                :id="column.name"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                :picker-options="pickerOptions"
                style="width: 99%"
                size="mini"
                value-format="timestamp"
                :clearable="false"
                @change="creatpickerTime"
                :default-time="['00:00:00', '23:59:59']"
              />
            </div>
            <div v-if="column.item_type == '5'">
              <div v-if="column.name == 'customer_id'">
                <el-select
                  v-model="obj[column.name]"
                  filterable
                  remote
                  placeholder="请输入"
                  clearable
                  :id="column.name"
                  :remote-method="
                    (query) =>
                      remoteMethod(
                        query,
                        column.url,
                        column.url_param,
                        column.name
                      )
                  "
                  @change="handleChange"
                >
                  <el-option
                    v-for="item in column.options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </div>
              <div v-else>
                <el-select
                  v-model="obj[column.name]"
                  filterable
                  remote
                  placeholder="请输入"
                  clearable
                  :remote-method="
                    (query) =>
                      remoteMethod(
                        query,
                        column.url,
                        column.url_param,
                        column.name
                      )
                  "
                  @change="handleChange"
                >
                  <el-option
                    v-for="item in column.options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div v-else>
            <!-- 订单跳转部分 -->
            <div v-if="column.name === 'order_no'">
              <!-- 订单只有一个 -->
              <div v-if="typeof scope.row[propMap[column.name]] == 'string'">
                <span
                  class="span2A"
                  style="cursor: pointer"
                  @click="
                    handleDeleteType(scope.$index, scope.row, true, 'order_no')
                  "
                  >{{ scope.row[propMap[column.name]] }}</span
                >
              </div>
              <div
                v-else-if="typeof scope.row[propMap[column.name]] == 'object'"
              >
                <div v-if="scope.row[propMap[column.name]].length > 3">
                  <span>{{ 12312321 }}</span>
                  <div
                    v-for="(item, index) in scope.row[
                      propMap[column.name]
                    ].slice(0, 3)"
                    :key="index"
                  >
                    {{ item.order_no }}
                  </div>
                  <el-popover placement="right" width="100" trigger="hover">
                    <div
                      v-for="(item, index) in scope.row[propMap[column.name]]"
                      style="cursor: pointer; font-size: 12px"
                      :key="index"
                    >
                      {{ item.order_no }}
                    </div>
                    <span slot="reference" style="cursor: pointer">...</span>
                  </el-popover>
                </div>
                <div v-else>
                  <div
                    v-for="(item, index) in scope.row[propMap[column.name]]"
                    style="cursor: pointer"
                    :key="index"
                  >
                    {{ item.order_no }}
                  </div>
                </div>
              </div>
              <div v-else>
                <span style="cursor: pointer">{{
                  scope.row[propMap[column.name]]
                }}</span>
              </div>
            </div>
            <!-- 运单跳转部分 -->
            <div v-else-if="column.name === 'waybill_no'">
              <!-- 区分当只有一个运单号 -->
              <div v-if="typeof scope.row[propMap[column.name]] == 'string'">
                <span
                  class="span2A"
                  style="cursor: pointer"
                  @click="
                    handleDeleteType(
                      scope.$index,
                      scope.row,
                      true,
                      'waybill_no'
                    )
                  "
                  >{{ scope.row[propMap[column.name]] }}</span
                >
              </div>
              <!-- 当有多个运单号 -->
              <div
                v-else-if="typeof scope.row[propMap[column.name]] == 'object'"
              >
                <!-- 当运单大于3个的时候 加一个省略了号并且将数据展示 -->
                <div
                  v-if="
                    scope.row[propMap[column.name]] != null &&
                    scope.row[propMap[column.name]].length > 3
                  "
                >
                  <div
                    v-for="(item, index) in scope.row[
                      propMap[column.name]
                    ].slice(0, 3)"
                    style="cursor: pointer"
                    class="span2A"
                    @click="handleJumpway(scope, index)"
                    :key="index"
                  >
                    {{ item.waybill_no }}
                  </div>
                  <el-popover placement="right" width="100" trigger="hover">
                    <div
                      v-for="(item, index) in scope.row[propMap[column.name]]"
                      style="cursor: pointer; font-size: 12px"
                      class="span2A"
                      @click="handleJumpway(scope, index)"
                      :key="index"
                    >
                      <span slot="reference" style="cursor: pointer">...</span>
                    </div>
                  </el-popover>
                </div>
                <div v-else>
                  <div
                    v-for="(item, index) in scope.row[propMap[column.name]]"
                    style="cursor: pointer"
                    class="span2A"
                    @click="handleJumpway(scope, index)"
                    :key="index"
                  >
                    {{ item.waybill_no }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 申请单号 -->
            <div v-else-if="column.name === 'source_no'">
              <div>
                <span
                  style="cursor: pointer"
                  class="span2A"
                  @click="requestCode(scope.row)"
                  >{{ scope.row[propMap[column.name]] }}</span
                >
              </div>
            </div>
            <!-- 状态 -->
            <div v-else-if="column.name === 'status_list'">
              <el-tag
                :hit="false"
                effect="plain"
                :type="getBackgroundColor(scope.row[propMap[column.name]])"
                style="
                  display: inline-block;
                  padding: 0px 10px;
                  margin: 8px 0px 0px 0px;
                "
                >{{ scope.row[propMap[column.name]] }}</el-tag
              >
            </div>
            <div v-else-if="column.name === 'status'">
              <el-tag
                :hit="false"
                effect="plain"
                :type="getBackgroundColor(scope.row.status)"
                style="
                  display: inline-block;
                  padding: 0px 10px;
                  margin: 8px 0px 0px 0px;
                "
                >{{ scope.row[propMap[column.name]] }}</el-tag
              >
            </div>
            <div v-else-if="column.name === 'account_status'">
              <el-tag
                :hit="false"
                effect="plain"
                :type="getBackgroundColor(scope.row[propMap[column.name]])"
                style="
                  display: inline-block;
                  padding: 0px 10px;
                  margin: 8px 0px 0px 0px;
                "
                >{{ scope.row[propMap[column.name]] }}</el-tag
              >
            </div>
            <div v-else-if="column.name === 'account_no'">
              <div>
                <span
                  style="cursor: pointer"
                  class="span2A"
                  @click="DetailData(scope.row)"
                  >{{ scope.row[propMap[column.name]] }}</span
                >
              </div>
            </div>
            <div v-else>
              <span>{{ scope.row[propMap[column.name]] }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        align="center"
        label="操作"
        min-width="150px"
        v-if="operation_type == 1"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            plain
            size="mini"
            @click="handleClickDetail(scope.row)"
            data-tracker="P5-9"
            v-permission="particulars"
            v-if="scope.$index != 0"
            >详情
          </el-button>
          <el-button
            v-permission="redact"
            data-tracker="P5-5"
            type="text"
            plain
            size="mini"
            v-if="scope.$index != 0"
            @click="handleClickEdit(scope.row)"
            >编辑
          </el-button>
          <el-button
            v-permission="modification"
            type="text"
            size="mini"
            data-tracker="P5-6"
            v-if="scope.$index != 0"
            @click="clickabnormalFn(scope.row)"
            >异常操作</el-button
          >
          <el-button
            v-if="hasPreviewBtn && scope.$index != 0"
            type="text"
            size="mini"
            data-tracker="P5-6"
            @click="clickPreview(scope.row)"
            >预览报告</el-button
          >
          <el-button
            v-if="hasAccountBtn && scope.$index != 0"
            type="text"
            size="mini"
            data-tracker="P5-6"
            @click="goAccount(scope.row)"
            >发票账户</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        align="center"
        label="操作"
        min-width="150px"
        v-if="operation_type == 2"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            plain
            size="mini"
            @click="handleClickDetail(scope.row)"
            data-tracker="P5-9"
            v-if="scope.$index != 0"
            >查看
          </el-button>
          <el-button
            data-tracker="P5-5"
            type="text"
            plain
            size="mini"
            v-if="scope.$index != 0"
            @click="handleClickEdit(scope.row)"
            >跟进
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        label="操作"
        header-align="center"
        align="left"
        :min-width="fixedWidth ? `${fixedWidth}px` : '150px'"
        v-if="operation_type == 3"
      >
        <template slot-scope="scope" v-if="scope.$index != 0">
          <div
            class="optionDiv"
            style="white-space: nowrap; display: inline-block"
          >
            <slot name="operation" :scope="scope"></slot>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { dynamicState, longRangeSearch } from "@/api/auditing";
export default {
  name: "tableheader",
  // fixedWidth 操作列的列宽 不传默认150
  props: [
    "header_data_list",
    "HeaderData",
    "objheader",
    "propMap",
    "childEvent",
    "operation_type",
    "particulars",
    "redact",
    "modification",
    "zhangshan",
    "isNameLink",
    "hasPreviewBtn",
    "hasAccountBtn",
    "fixedWidth",
    "origin"
  ],
  data() {
    return {
      obj: [],
      options: [],
      value: "",
      propsBranchType: {},
      value1: "",
      optionsList: [],
      search: "",

      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      disabled: true,
      tabulatedData: [],
      HeightList: "auto",
    };
  },
  watch: {
    obj: function (val) {},
    header_data_list: function (old, newvalue) {
      // console.log("函数接口的调用啦");
      this.tabulatedData = this.header_data_list.concat([]);
    },
    tabulatedData: function (old, newvalue) {
      if (this.tabulatedData.length > 5) {
        this.HeightList = document.documentElement.clientHeight - 200;
      } else {
        this.HeightList = "auto";
      }
    },
  },
  computed: {
    filterTableData() {
      () =>
        this.$props.tabulatedData.filter(
          (data) =>
            !this.search ||
            data[this.$props.propMap["name"]]
              .toLowerCase()
              .includes(this.search.toLowerCase())
        );
    },
  },
  created() {},
  mounted() {
    this.button_name();
    this.tabulatedData = this.header_data_list.concat([]);
    // if (this.tabulatedData.length > 5) {
    //   this.HeightList = document.documentElement.clientHeight - 255;
    // } else {

    // }
    // console.log(this.tabulatedData.length, " this.tabulatedData");
  },
  methods: {
    // 表头部重新渲染
    renderHeader(h, { column, $index }) {
      // await this.$nextTick()
      // await this.$nextTick(() => {
      // 获取操作按钮组的元素
      const opts = document.getElementsByClassName("optionDiv");
      let widthArr = [];
      // 取操作组的最大宽度
      Array.prototype.forEach.call(opts, function (item) {
        if (item.innerText) {
          widthArr.push(item.offsetWidth);
        }
      });
      // console.log("11111111", column.label, widthArr);

      // 重新设置列标题及宽度属性
      if (widthArr.length > 0) {
        column.width = Math.max(...widthArr) + 24;
        return h("span", column.label);
      } else {
        column.width = 0;
        return h("span", column.label);
      }
      // });
    },
    //   renderHeader(h, data) {
    //   return h("span", [
    //     h(
    //       "el-tooltip",
    //       {
    //         attrs: {
    //           class: "item",
    //           effect: "dark",
    //           content: data.column.label,
    //           placement: "top",
    //         },
    //       },
    //       [h("span", data.column.label)]
    //     ),
    //   ]);
    // },
    selectable(row, index) {
      if (index === 0) {
        return false;
      } else {
        return true;
      }
    },
    handleSelectionChange(val) {
      var orderIdNums = [];
      if (val.length > 0) {
        for (var i = 0; i < val.length; i++) {
          orderIdNums = val.map((item) => Number(item.id));
        }
      } else {
        this.orderIdNums = [];
      }
      this.$emit("orderIdNumsEvent", orderIdNums, val);
    },
    handleDeleteType(index, id, type, typological) {
      this.$emit("childEvent", index, id, type, typological);
    },
    // 默认时间
    button_name() {
      this.$set(this.obj, "create_time", [
        1664553600000,
        new Date().getTime() + 3600000,
      ]);
    },
    creatpickerTime(value) {
      if (value != null) {
        this.handleChange();
      } else {
        this.button_name();
        this.handleChange();
      }
    },
    // 订单打开功能
    remoteMethod(query, url, url_param, name) {
      const jsonObject = JSON.parse(url_param);
      for (let key in jsonObject) {
        if (jsonObject.hasOwnProperty(key) && jsonObject[key] === "") {
          jsonObject[key] = query;
        }
      }
      // console.log(jsonObject);
      longRangeSearch(url, jsonObject).then((res) => {
        this.$set(
          this.HeaderData.find((item) => item.name == name),
          "options",
          res.data
        );
      });
    },
    // 远程搜索功能
    cacaderobj(url, url_param, name) {
      dynamicState(url, url_param).then((res) => {
        const jsonObject = JSON.parse(url_param || "{}");
        const firstKey = Object.keys(jsonObject);
        if (firstKey[0] == "codes") {
          const firstKey = Object.keys(res.data.list)[0];
          // console.log(firstKey, "firstKey");
          if (firstKey == "pay_way") {
            this.propsBranchType = {
              value: "item_code",
              label: "item_name",
            };
            var thermosphereList = this.transformArray(res.data.list.pay_way);
            this.$set(
              this.HeaderData.find((item) => item.name == name),
              "options",
              thermosphereList
            );
          } else if (firstKey == "thermosphere") {
            this.propsBranchType = {
              value: "item_code",
              label: "item_name",
            };
            var thermosphereList = this.transformArray(
              res.data.list.thermosphere
            );
            this.$set(
              this.HeaderData.find((item) => item.name == name),
              "options",
              thermosphereList
            );
          } else if (firstKey == "transport_way") {
            var thermosphereList = this.transformArray(
              res.data.list.transport_way
            );
            this.$set(
              this.HeaderData.find((item) => item.name == name),
              "options",
              thermosphereList
            );
          } else {
            this.propsBranchType = {
              value: "item_code",
              label: "item_name",
            };
            var thermosphereList = this.transformArray(res.data.list[firstKey]);
            this.$set(
              this.HeaderData.find((item) => item.name == name),
              "options",
              thermosphereList
            );
          }
        } else if (firstKey == "is_all") {
          this.propsBranchType = {
            value: "id",
            label: "name",
          };
          this.$set(
            this.HeaderData.find((item) => item.name == name),
            "options",
            res.data.data
          );
        } else if (firstKey[0] == "all") {
          var datalist = this.changeNicknameToName(res.data);
          this.$set(
            this.HeaderData.find((item) => item.name == name),
            "options",
            datalist
          );
        } else if (firstKey[0] == "show_employee") {
          (this.propsBranchType = {
            emitPath: true,
            checkStrictly: true,
            value: "id",
            label: "branch_name",
            emitPath: false,
            children: "next_level_data",
          }),
            this.$set(
              this.HeaderData.find((item) => item.name == name),
              "options",
              res.data
            );
        } else {
          // console.log("123123======================");
          this.propsBranchType = {
            value: "id",
            label: "name",
          };
          this.$set(
            this.HeaderData.find((item) => item.name == name),
            "options",
            res.data
          );
        }
      });
    },
    myFunction(objList) {
      var objListrevmot = { ...objList };
      var Propertieslist = this.removeEmptyProperties(objListrevmot);
      this.objheader(Propertieslist);
    },
    handleChange() {
      var objListdata = { ...this.obj };
      // console.log(objListdata, "fjaksldfj");
      var objList = this.handleChangeList(objListdata);
      this.myFunction(objList);
    },
    handleChangeList(objlist) {
      for (let key in objlist) {
        if (this.HeaderData.find((item) => item.name == key) != undefined) {
          if (this.HeaderData.find((item) => item.name == key).item_type == 2) {
            if (
              this.HeaderData.find((item) => item.name == key).param_type == 0
            ) {
              objlist[key] = String(objlist[key]);
            } else if (
              this.HeaderData.find((item) => item.name == key).param_type == 2
            ) {
              objlist[key] = objlist[key];
            }
          } else if (
            this.HeaderData.find((item) => item.name == key).item_type == 1
          ) {
            objlist[key] = String(objlist[key]);
          } else if (
            this.HeaderData.find((item) => item.name == key).item_type == 3
          ) {
            if (objlist[key] != null) {
              if (
                this.HeaderData.find((item) => item.name == key).param_type == 0
              ) {
                if (typeof objlist[key] == "object") {
                  objlist[key] = String(objlist[key][0]);
                } else {
                  objlist[key] = String(objlist[key]);
                }
              } else if (
                this.HeaderData.find((item) => item.name == key).param_type == 2
              ) {
                if (typeof objlist[key] != "object") {
                  objlist[key] = [objlist[key]];
                }
              }
            }
          } else if (
            this.HeaderData.find((item) => item.name == key).item_type == 4
          ) {
            // console.log(objlist[key], "objlist[key]");
            if (objlist[key] != null) {
              objlist[key] = {
                start_time: (objlist[key][0] + "").slice(0, 10),
                end_time: (objlist[key][1] + "").slice(0, 10),
              };
            }
          } else if (
            this.HeaderData.find((item) => item.name == key).item_type == 5
          ) {
            objlist[key] = String(objlist[key]);
          } else {
            objlist[key] = "";
          }
        }
      }
      return objlist;
    },
    childMethod() {
      this.obj = [];
      this.button_name();
      this.myFunction();
    },
    removeEmptyProperties(obj) {
      for (let key in obj) {
        if (obj[key] != null) {
          if (
            (obj.hasOwnProperty(key) && obj[key] === "") ||
            obj[key].length == 0
          ) {
            delete obj[key];
          }
        }
      }
      return obj;
    },
    changeNicknameToName(users) {
      return users.map((user) => {
        const { nickname, ...rest } = user;
        return { name: nickname, ...rest };
      });
    },
    transformArray(arr) {
      return arr.map(function (obj) {
        return {
          name: obj.item_name,
          id: obj.item_code,
        };
      });
    },
    // 详情接口
    handleClickDetail(val) {
      this.$emit("handleClickDetail_second", val);
      this.$emit("handleClickDetail_three", val);
    },
    // 编辑接口
    handleClickEdit(val) {
      this.$emit("handleClickEdit_second", val);
      this.$emit("handleClickEdit_three", val);
    },
    // 异常操作
    clickabnormalFn(val) {
      this.$emit("clickabnormalFn_second", val);
      this.$emit("clickabnormalFn_three", val);
    },
    // 点击预览
    clickPreview(val) {
      this.$emit("clickPreview", val);
    },
    goAccount(row) {
      this.$emit("clickGoAccount", row);
    },
    handleJumpway(scope, index) {
      // console.log(scope, "=========================");
      this.$emit("childEventJupway", scope, index);
    },
    changeSort(value) {
      // console.log(value, "jflaksjdlkjjlk");
      if (
        value.prop == "total_goods_cnt" ||
        value.prop == "total_freight" ||
        value.prop == "weight" ||
        value.prop == "volume" ||
        value.prop == "number" ||
        value.prop == "expense" ||
        value.prop == "count"
      ) {
        if (value.order == "ascending") {
          this.NumdescendingOrder(value.prop);
        } else if (value.order == "descending") {
          this.NumascendingOrder(value.prop);
        } else {
          this.tabulatedData = this.header_data_list.concat([]);
        }
      } else if (
        value.prop == "order_no" ||
        value.prop == "waybill_no" ||
        value.prop == "collect_number" ||
        value.prop == "batch" ||
        value.prop == "batch_number" ||
        value.prop == "waybill_no_list" ||
        value.prop == "create_time_name" ||
        value.prop == "account_no" ||
        value.prop == "source_no" ||
        value.prop == "apply_no"
      ) {
        if (value.order == "ascending") {
          this.ascendingOrder(value.prop);
        } else if (value.order == "descending") {
          this.descendingOrder(value.prop);
        } else {
          this.tabulatedData = this.header_data_list.concat([]);
        }
      } else {
        if (value.order == "ascending") {
          this.ascendingOrderstring(value.prop);
        } else if (value.order == "descending") {
          this.ascendingOrderstring(value.prop);
        } else {
          this.tabulatedData = this.header_data_list.concat([]);
        }
      }
    },
    // 非数字的升序函数通过id的大小进行排序单号类数据
    ascendingOrder(value) {
      const first = this.tabulatedData.shift();
      this.tabulatedData.sort((a, b) => {
        if (a[value] < b[value]) {
          return 1;
        } else if (a[value] > b[value]) {
          return -1;
        } else {
          return 0;
        }
      });
      this.tabulatedData.unshift(first);
    },
    // 非数字的降序排列单号类数据
    descendingOrder(value) {
      const first = this.tabulatedData.shift();
      this.tabulatedData.sort((a, b) => {
        if (a[value] > b[value]) {
          return 1;
        } else if (a[value] < b[value]) {
          return -1;
        } else {
          return 0;
        }
      });
      this.tabulatedData.unshift(first);
    },
    // 数字类的排序升序
    NumascendingOrder(value) {
      // console.log(value, "value");
      const first = this.tabulatedData.shift();
      this.tabulatedData.sort((a, b) => {
        // console.log(a[value]);
        if (a[value] === undefined || a[value] === null) {
          return 1;
        } else if (a[value] === undefined || a[value] === null) {
          return -1;
        } else {
          return a[value] - b[value];
        }
      });
      this.tabulatedData.unshift(first);
    },
    NumdescendingOrder(value) {
      const first = this.tabulatedData.shift();
      this.tabulatedData.sort((a, b) => {
        if (a[value] === undefined || a[value] === null) {
          return 1;
        } else if (a[value] === undefined || a[value] === null) {
          return -1;
        } else {
          return b[value] - a[value];
        }
      });
      this.tabulatedData.unshift(first);
    },
    // 字符串类型的相同名字排在一起
    ascendingOrderstring(value) {
      // console.log(value, "排序上");
      const first = this.tabulatedData.shift();
      this.tabulatedData.sort((a, b) => {
        // console.log(a[value], "a[value]");
        // console.log(b[value], "b[value]");
        if (a[value] < b[value]) {
          return 1;
        } else if (a[value] > b[value]) {
          return -1;
        } else {
          return 0;
        }
      });
      this.tabulatedData.unshift(first);
    },
    descendingOrderstring(value) {
      // console.log(this.HeaderData, "fas;dlkf;lk");
      // // console.log(value,"排序下")
    },
    // 申请单号
    requestCode(val) {
      // scence_type: 用来判断审核记录的类型 1：承运商应付申请 ： 2：报销申请 3：备用金申请 4：付款申请 5 发票申请 source_id 页面跳转后详情渲染的 id 是审核的id  TageType: 7

      if (val.source_type == 1) {
        this.$router.push({
          name: "thecarrierPaysadd",
          query: {
            audit_id: val.id,
            id: val.source_id,
            Type: 2,
            TageType: 7,
          },
        });
      } else if (val.source_type == 2) {
        this.$router.push({
          name: "reimburSementadd",
          query: {
            Type: 2,
            id: val.source_id,
            audit_id: val.examine_record_id,
            TageType: 7,
          },
        });
      } else if (val.source_type == 3) {
        // type 这个是 判断是 查看还是编辑 id 当行传递的 id Tage 表示的是类型
        this.$router.push({
          name: "reserveMoneyadd",
          query: {
            Type: 2,
            id: val.source_id,
            TageType: 7,
            audit_id: val.examine_record_id,
          },
        });
      } else if (val.source_type == 4) {
        this.$router.push({
          name: "paymentReqAdd",
          query: {
            Type: 2,
            id: val.source_id,
            TageType: 7,
            audit_id: val.examine_record_id,
          },
        });
      } else if (val.source_type == 5) {
        this.$router.push({
          name: "receiptManageadd",
          query: {
            Type: 2,
            id: val.source_id,
            TageType: 7,
            audit_id: val.examine_record_id,
          },
        });
      }else if (val.source_type == 6) {
          this.$router.push({
            name: "useStampsAdd",
            query: {
            Type: 2,
            id: val.source_id,
            TageType: 7,
            audit_id: val.examine_record_id,
          },
          });
        }else if (val.source_type == 7) {
          this.$router.push({
            name: "purChaseadd",
            query: {
            Type: 2,
            id: val.source_id,
            TageType: 7,
            audit_id: val.examine_record_id,
          },
          });
        }
        else if (val.source_type == 8) {
          this.$router.push({
            name: "ztoRechargeAdd",
            query: {
            Type: 2,
            id: val.source_id,
            TageType: 7,
            audit_id: val.examine_record_id,
          },
          });
        }
    },
    getBackgroundColor(item) {
      if (
        item == "待揽收" ||
        item == "待创建干线" ||
        item == "待发车" ||
        item == "待配送" ||
        item == "待签收" ||
        item == "待受理" ||
        item == "黑名单" ||
        item == "待对账" ||
        item == 0
      ) {
        return "info";
      } else if (
        item == "揽收中" ||
        item == "配送中" ||
        item == "运输中" ||
        item == "对账中"
      ) {
        return "warning";
      } else if (
        item == "已签收" ||
        item == "已完结" ||
        item == "启用" ||
        item == "对账通过" ||
        item == "已收款" ||
        item == 1 ||
        item == "已到达"
      ) {
        return "success";
      } else if (
        item == "已发车" ||
        item == "停用" ||
        item == "禁用" ||
        item == "对账异常"
      ) {
        return "danger";
      } else {
        return "";
      }
    },
    widthObj(value) {
      var data = ["订单号", "运单号", "距离（km）", "订单温层", "所属客户区域"];
      var data2 = [
        "创建时间",
        "签收时间",
        "完结时间",
        "预计签收时间",
        "操作时间",
        "更新时间",
        "发货公司",
        "收货公司",
        "订单备注",
      ];
      var data3 = [
        "发货人手机号",
        "收货人手机号",
        "货物温层",
        "运单温层",
        "包装型号",
      ];
      var data4 = [
        "包装数量",
        "运单状态",
        "承运类型",
        "是否拒签",
        "状态",
        "发货人",
        "收货人",
      ];
      var data5 = [
        "揽收单号",
        "干线单号",
        "配送单号",
        "签收单号",
        "回单号",
        "回箱单号",
      ];
      var data6 = ["所属客户"];
      if (data4.includes(value)) {
        return "120";
      } else if (data.includes(value)) {
        return "120";
      } else if (data2.includes(value)) {
        return "150";
      } else if (data3.includes(value)) {
        return "130";
      } else if (data5.includes(value)) {
        return "170";
      } else if (data6.includes(value)) {
        return "200";
      } else if (value.length == 4 || value.length == 3) {
        return "120";
      } else if (value.length == 5) {
        return "130";
      } else if (value.length == 2) {
        return "120";
      } else {
        return "180";
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if(this.origin=="file"){
        // 即将过期
        if (['1','2','3','4'].includes(row.expire_status)) {
          return "unexpire-row";
        }
        // 已过期
        if (['5'].includes(row.expire_status)) {
          return "expire-row";
        }
      }

      // if (rowIndex === 1) {
      //   return "blue";
      // } else if (rowIndex === 3) {
      //   return "success-row";
      // }

      return "";
    },
    DetailData(value) {
      console.log(value)
      this.$store.commit("GET_CHECK_DETAIL_ID", value.id);
      this.$store.commit("CHANGE_CHECK_TYPE", "info");
    }
  },
};
</script>
<style lang="less" scoped>
.custom-tabulatedData .el-table__body-wrapper {
  /* overflow-x: auto !important; */
  /* overflow-y: auto !important; */
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /* height: 10px !important; */
  /* width: 10px !important; */
}

// /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   background-color: #888;
//   border-radius: 4px;
// }

// /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
//   background-color: #eee;
//   border-radius: 4px;
// }
/deep/ .el-table td.el-table__cell .el-tooltip div span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .el-table__row:first-child {
  color: red;
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  z-index: 2;
}

/deep/ .el-table .cell {
  word-break: keep-all !important;
  white-space: nowrap !important;
}
/deep/ .el-table .warning-row {
  background: oldlace;
}

/deep/ .el-table .success-row {
  background: #f0f9eb;
}
/deep/ .el-table .unexpire-row {
  background: rgb(234, 183, 87) !important;
}
/deep/ .el-table .expire-row {
  background: #eb6a6a  !important;
}
// 
/deep/ tr.expire-row.hover-row ,tr.unexpire-row.hover-row{
    &, &.el-table__row--striped {
    &, &.current-row {
        > td.el-table__cell {
        background-color: transparent  !important;
        }
    }
    }
}
// 
/deep/.el-table--striped .el-table__body tr.expire-row.el-table__row--striped td.el-table__cell,
/deep/.el-table--striped .el-table__body tr.unexpire-row.el-table__row--striped td.el-table__cell{
  background: transparent !important;
}



</style>